<template>
  <JeepayBackground :bgColorStyle="{ height: '706rpx' }">
    <JeepayCustomNavbar textColor="#fff" bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="云喇叭详情" backCtrl="back" />

    <JeepayTableListItem
      viewClass="list-item-by-detail"
      logo="/pageDevice/static/detailsLislImg/horn-white.svg"
      :title="vdata.deviceName"
      :subtitle="vdata.deviceNo"
      :moreBtnList="list"
    />

    <view class="create-time">
      <view class="time-title">设备厂商</view>
      <view class="dev-info">{{ datamap?.provider(vdata.provider) }}</view>
    </view>
    <view class="create-time" style="border: none; padding-top: 0">
      <view class="time-title">创建时间</view>
      <view class="time-info">{{ vdata.createdAt }}</view>
    </view>
    <JeepayCard editText="编辑信息" @editTap="toEdit">
      <JeepayDescview>
        <JeepayDescviewItem title="设备编号" :desc="vdata.deviceParams?.deviceNo" />
        <JeepayDescviewItem title="设备名称" :desc="vdata.deviceName" />
        <JeepayDescviewItem title="绑定门店" :desc="vdata.storeName" />
      </JeepayDescview>
    </JeepayCard>
    <JDetailsSwitch title="设备状态" subTitle="状态禁用后，该设备将无法使用">
      <template #titleRight>
        <JeepayStateSwitch v-model:state="vdata.state" :showSwitchType="true" :updateStateFunc="confirmSwitch" />
      </template>
    </JDetailsSwitch>
    <view class="store-info">
      <JDetailsCell title="播报类型" :info="vdata.bindType == 0 ? '门店所有订单' : '来自受支持码牌的订单'" @tap="refBindType.open(vdata.bindType)" />
    </view>
    <JeepayCard
      viewStyle="margin-top:30rpx"
      title="受支持的云喇叭设备"
      subtitle="以下云喇叭设备将会播报来自当前码牌的订单"
      v-if="vdata.bindType == 1"
      @clickTitle="qrcId.open(vdata.storeId, vdata.qrcIdList, vdata.deviceId, vdata.bindQrcId)"
    >
      <template #titleRight>
        <image class="selected-qrcId" src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
      </template>
      <block v-for="v in vdata.qrcList" :key="v.qrcId">
        <qrcCode :title="v.qrcAlias" :subTitle="v.qrcId" />
      </block>
    </JeepayCard>

    <JSinglePopup ref="more" :list="list" activeColor="#FF5B4C" />
    <JSinglePopup ref="refBindType" :list="typeList" @confirm="editBindType" />
    <JeepayPopupConfirm ref="tips" />
    <uni-popup ref="popupDialog" type="dialog">
      <uni-popup-dialog
        mode="base"
        :before-close="true"
        title="播报金额"
        @close="
          () => {
            popupDialog.close()
            more.open()
          }
        "
        @confirm="testDevice"
      >
        <uni-easyinput :inputBorder="false" :clearable="false" v-model="vdata.amount" type="digit" placeholder="请输入播报金额" />
      </uni-popup-dialog>
    </uni-popup>
    <selectedQrcId ref="qrcId" @updateDetails="getDetails(vdata.deviceId)" />
  </JeepayBackground>
</template>

<script setup>
import { nextTick, reactive, ref } from 'vue'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import infoBox from '@/commons/utils/infoBox.js'
import { reqLoad, API_URL_SYS_DEVICE_LIST, API_URL_SYS_CODE_LIST, $speakTest, $deviceUnbind } from '@/http/apiManager.js'
import qrcCode from './components/qrcCode.vue'
import datamap from '@/commons/utils/datamap.js'
import selectedQrcId from './components/selectedQrcId.vue'
import emit from '@/commons/utils/emit.js'
import go from '@/commons/utils/go.js'

// 监听 更新事件
onUnload(() => uni.$off(emit.ENAME_REF_SPEAKER_DETAIL))
uni.$on(emit.ENAME_REF_SPEAKER_DETAIL, function (data) {
  getDetails(vdata.deviceId)
})

onLoad((options) => {
  getDetails(options.deviceId)
})
const more = ref(null)
const tips = ref(null)
const refBindType = ref(null)
const popupDialog = ref(null)
const qrcId = ref(null)
const vdata = reactive({
  amount: '',
})

const list = reactive([
  {
    label: '播报测试',
    value: 'test',
    fun: () => {
      vdata.amount = ''
      popupDialog.value.open()
    },
  },
  { label: '解除绑定', value: 'remove', color: '#FF5B4C', fun: confirm },
])
function confirm() {
  more.value.close()
  tips.value
    .open('确认解除绑定吗？', { confirmColor: '#FF5B4C' })
    .then((res) => {
      $deviceUnbind(vdata.deviceId).then((res) => {
        infoBox.showSuccessToast('解绑成功').then(() => {
          go.back(1, emit.ENAME_REF_SPEAKER_LIST)
        })
      })
    })
    .catch((err) => {
      more.value.open('remove')
    })
}
const typeList = [
  { label: '门店所有订单', value: 0 },
  { label: '来自受支持码牌的订单', value: 1 },
]
const getDetails = (params) => {
  reqLoad.getById(API_URL_SYS_DEVICE_LIST, params).then(({ bizData }) => {
    Object.assign(vdata, bizData)

    vdata.deviceParams = JSON.parse(vdata.deviceParams || '{}')
  })
}
// 修改设备状态
const confirmSwitch = (bol) => {
  return reqLoad.addOrUpdate(vdata.deviceId, API_URL_SYS_DEVICE_LIST, { state: bol }).then((res) => {
    emit.refPageAndSearchEmit(emit.ENAME_REF_SPEAKER_LIST)
  })
}
// 播报测试
function testDevice() {
  if (!vdata.amount) {
    return infoBox.showErrorToast('请输入播报金额')
  }
  $speakTest(vdata.deviceId, { amount: vdata.amount }).then((res) => {
    popupDialog.value.close()
  })
}
// 修改绑定设备信息
const editBindType = (val) => {
  tips.value
    .open('确认修改播报类型吗？')
    .then((res) => {
      vdata.bindType = val.value
      return reqLoad.addOrUpdate(vdata.deviceId, API_URL_SYS_DEVICE_LIST, { bindType: vdata.bindType, qrcIdList: vdata.qrcIdList || [] })
    })
    .catch(() => {
      refBindType.value.open(vdata.bindType)
    })
}
// 去编辑页面
const toEdit = () => {
  go.to('PAGES_APP_HORN_BIND', { devId: vdata.deviceId })
}
</script>

<style lang="scss" scoped>
.create-time {
  display: flex;
  justify-content: space-between;
  margin: 0 75rpx;
  padding: 50rpx 0;
  font-size: 30rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
  .time-title {
    color: rgba(255, 255, 255, 0.7);
  }
  .time-info {
    color: #fff;
  }
}
.store-info {
  padding: 0.1rpx;
  margin: 0 35rpx;
  background-color: #fff;
  border-radius: $J-b-r32;
  overflow: hidden;
}
.default-img {
  width: 50rpx;
  height: 50rpx;
}

.dev-info {
  padding: 3rpx 15rpx;
  border-radius: 6rpx;
  background: rgba(255, 255, 255, 0.15);
  font-size: 26rpx;
  color: #fff;
}
.selected-qrcId {
  width: 40rpx;
  height: 40rpx;
  transform: rotate(90deg);
}
</style>
